<template>
  <div id="login-app">
    <div class="img-div">
      <!-- 图片 -->
      <img src="../images/reset.png" alt="" />
    </div>
    <div class="login-div">
      <div class="login-area">
        <h4 class="title">重置密码</h4>
        <form class="form" action="">
          <div style="margin: 5px">邮箱</div>
          <input class="one" type="text" v-model="email" />
          <button @click="send">发送</button>
        </form>
        <div class="account">
          <span class="already"
            >您已有账号?&nbsp;<span class="login" @click="toLogin"
              >用户登录</span
            ></span
          ><span class="rebuild"
            >建立新账号?&nbsp;<span class="register" @click="toRegister"
              >用户注册</span
            >
          </span>
        </div>
      </div>
    </div>
  </div>
</template>
  
  <script>
export default {
  data() {
    return {
      email: "",
    };
  },

  methods: {
    send() {
      alert("发送");
    },
    toLogin() {
      this.$router.push("/login");
    },
    toRegister() {
      this.$router.push("/register");
    },
  },
};
</script>
  
  <style>
#login-app {
  width: 720px;
  height: 360px;
  display: flex;
  background: white;
  font-family: Roboto;
  box-sizing: border-box;
}
.img-div {
  width: 50%;
  height: 100%;
  background-color: #9a9aeb;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.login-div {
  width: 50%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

.form {
  margin-left: 5px;
  font-size: 12px;
  transform: translateX(60px);
}

.one {
  border: 1px solid #9a9aeb;
  text-indent: 5px;
}

.account {
  font-size: 12px;
  margin-top: 50px;
  display: flex;
  justify-content: space-around;
}

.remember-div {
  margin-top: 5px;
}

.already {
  margin-left: 60px;
}

.rebuild {
  margin-right: 60px;
}

.rebuild:hover {
  cursor: pointer;
}

.login {
  color: #9a9aeb;
}

.login:hover {
  color: #9a9aeb;
}

.register {
  color: #9a9aeb;
}

img {
  width: 283.5px;
  height: 169.5px;
}

.title {
  color: 000000;
  font-size: 16px;
  margin-left: 16px;
  transform: translateX(120px);
}

button {
  background-color: black;
  color: white;
  width: 223px;
  height: 27.5px;
  border-radius: 5px;
  font-size: 12px;
  margin-top: 5px;
}

button:hover {
  cursor: pointer;
}

@media screen and(min-width: 720px) {
  #login-app {
    width: 500px;
  }
}
</style>